<template>
  <a-card bordered>
    <a-row>
      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.aliPay"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToAlipayModal(false)" style="font-size: 20px;"
                      :spin="spin.aliPay"
                      @mouseover="mouseOver(0)"
                      @mouseleave="mouseLeave(0)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToAlipayModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.alipayDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="支付方式实现 - 支付宝">
            <template slot="title">
              支付宝支付
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.aliPay"
            />
          </a-card-meta>
        </a-card>

      </a-col>

      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.wxPayApp"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToWxPayAppModal(false)" style="font-size: 20px;"
                      :spin="spin.wxPayApp"
                      @mouseover="mouseOver(1)"
                      @mouseleave="mouseLeave(1)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToWxPayAppModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.wxPayAppDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="支付方式实现 - 微信APP">
            <template slot="title">
              微信APP支付
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.wxPayApp"
            />
          </a-card-meta>
        </a-card>

      </a-col>

      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.wxPayMp"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToWxPayMpModal(false)" style="font-size: 20px;"
                      :spin="spin.wxPayMp"
                      @mouseover="mouseOver(2)"
                      @mouseleave="mouseLeave(2)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToWxPayMpModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.wxPayMpDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="支付方式实现 - 微信公众号支付">
            <template slot="title">
              微信公众号支付
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.wxPayMp"
            />
          </a-card-meta>
        </a-card>

      </a-col>

      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.wxPayMini"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToWxPayMiniModal(false)" style="font-size: 20px;"
                      :spin="spin.wxPayMini"
                      @mouseover="mouseOver(3)"
                      @mouseleave="mouseLeave(3)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToWxPayMiniModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.wxPayMiniDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="支付方式实现 - 微信小程序支付">
            <template slot="title">
              微信小程序支付
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.wxPayMini"
            />
          </a-card-meta>
        </a-card>

      </a-col>

      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.wxPayMini"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToHuiFuModal(false)" style="font-size: 20px;"
                      :spin="spin.wxPayMini"
                      @mouseover="mouseOver(4)"
                      @mouseleave="mouseLeave(4)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToHuiFuModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.huiFuDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="支付方式实现 - 微信小程序支付">
            <template slot="title">
              汇付支付
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.wxPayMini"
            />
          </a-card-meta>
        </a-card>

      </a-col>
    </a-row>

    <alipay-modal ref="alipayRef"></alipay-modal>
    <wx-pay-modal ref="wxPayRef"></wx-pay-modal>
    <hui-fu-pay-modal ref='huiFuRef'></hui-fu-pay-modal>
  </a-card>
</template>
<script>

import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";

import AlipayModal from "@views/gospel/configCenter/pay/modules/AlipayModal";
import WxPayModal from "@views/gospel/configCenter/pay/modules/WxPayModal";
import HuiFuPayModal from "@views/gospel/configCenter/pay/modules/HuiFuPayModal";

import aliPay from "../img/Pay_alipay.jpg";
import wxPayApp from "../img/Pay_wxPayApp.jpg";
import wxPayMp from "../img/Pay_wxPayMp.jpg";
import wxPayMini from "../img/Pay_wxPayMini.jpg";

import {alipayDoc, wxPayAppDoc, wxPayMiniDoc, wxPayMpDoc, huiFuDoc} from "@views/gospel/configCenter/mixins/ConfigDoc";

export default {
  name: "PayConfig",
  mixins: [BoneCommonMixin],
  components: {AlipayModal, WxPayModal, HuiFuPayModal},
  data() {
    return {
      description: "支付配置",
      imgUrl: {
        aliPay: aliPay,
        wxPayApp: wxPayApp,
        wxPayMp: wxPayMp,
        wxPayMini: wxPayMini,
        huiFu: wxPayMini
      },
      spin: {
        aliPay: false,
        wxPayApp: false,
        wxPayMp: false,
        wxPayMini: false,
        huiFu: false,
      },
      docUrl: {
        alipayDoc: alipayDoc,
        wxPayAppDoc: wxPayAppDoc,
        wxPayMiniDoc: wxPayMiniDoc,
        wxPayMpDoc: wxPayMpDoc,
        huiFuDoc: huiFuDoc
      }
    }
  },
  methods: {
    mouseOver: function (value) {
      switch (value) {
        case 0:
          this.spin.aliPay = true;
          break;
        case 1:
          this.spin.wxPayApp = true;
          break;
        case 2:
          this.spin.wxPayMp = true;
          break;
        case 3:
          this.spin.wxPayMini = true;
          break;
        case 4:
          this.spin.huiFu = true;
          break;
      }
    },
    mouseLeave: function (value) {
      switch (value) {
        case 0:
          this.spin.aliPay = false;
          break;
        case 1:
          this.spin.wxPayApp = false;
          break;
        case 2:
          this.spin.wxPayMp = false;
          break;
        case 3:
          this.spin.wxPayMini = false;
          break;
        case 4:
          this.spin.huiFu = true;
          break;
      }
    },
    goToAlipayModal(value) {
      this.$refs.alipayRef.visible = true;
      this.$refs.alipayRef.disable = value;
      this.$refs.alipayRef.queryJsonDict();
    },
    goToWxPayAppModal(value) {
      this.$refs.wxPayRef.visible = true;
      this.$refs.wxPayRef.url.configUpdate = "/config/pay/wxPayApp";
      this.$refs.wxPayRef.type = "wxPayConfigApp";
      this.$refs.wxPayRef.title = "微信支付 - APP支付";
      this.$refs.wxPayRef.disable = value;
      this.$refs.wxPayRef.queryJsonDict();
    },
    goToWxPayMpModal(value) {
      this.$refs.wxPayRef.visible = true;
      this.$refs.wxPayRef.url.configUpdate = "/config/pay/wxPayMp";
      this.$refs.wxPayRef.type = "wxPayConfigMp";
      this.$refs.wxPayRef.title = "微信支付 - 公众号支付";
      this.$refs.wxPayRef.disable = value;
      this.$refs.wxPayRef.queryJsonDict();
    },
    goToWxPayMiniModal(value) {
      this.$refs.wxPayRef.visible = true;
      this.$refs.wxPayRef.url.configUpdate = "/config/pay/wxPayMini";
      this.$refs.wxPayRef.type = "wxPayConfigMini";
      this.$refs.wxPayRef.title = "微信支付 - 小程序支付";
      this.$refs.wxPayRef.disable = value;
      this.$refs.wxPayRef.queryJsonDict();
    },
    goToHuiFuModal(value) {
      this.$refs.huiFuRef.visible = true;
      this.$refs.huiFuRef.url.configUpdate = "/config/pay/huiFuPay";
      this.$refs.huiFuRef.type = "huiFuPayConfig";
      this.$refs.huiFuRef.title = "汇付";
      this.$refs.huiFuRef.disable = value;
      this.$refs.huiFuRef.queryJsonDict();
    },
    jump(url) {
      window.open(url, '_blank');
    }
  }
}
</script>

<style scoped>

</style>